<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="padding: 20px;padding-bottom: 0px">
            <el-form-item label="任务名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入任务名称"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="padding: 20px;padding-bottom: 0px">
            <el-form-item label="同步类型" prop="syncType">
              <el-radio-group v-model="form.syncType" size="medium">
                <el-radio-button label="全量同步" value="1"></el-radio-button>
                <el-radio-button label="增量同步" value="2"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple" style="padding: 20px">
            <span style="color: #606266;font-size: 16px;font-weight: bold">MySQL 配置</span>
            <br />
            <br />
            <el-form-item label="地址" prop="mUrl">
              <el-input v-model="form.mUrl" placeholder="请输入数据库地址（例如：localhost）"></el-input>
            </el-form-item>
            <el-form-item label="端口" prop="mPort">
              <el-input v-model="form.mPort" placeholder="请输入数据库端口（例如：3306）"></el-input>
            </el-form-item>
            <el-form-item label="库名" prop="mSchema">
              <el-input v-model="form.mSchema" placeholder="请输入数据库库名（例如：指定监听库名称，留空表示所有库都监听）"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="mUser">
              <el-input v-model="form.mUser" placeholder="请输入数据库账号（例如：root）"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="mPass">
              <el-input v-model="form.mPass" placeholder="请输入数据库密码（例如：root）"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" style="padding: 20px">
            <span style="color: #606266;font-size: 16px;font-weight: bold">ElasticSearch 配置</span>
            <br />
            <br />
            <el-form-item label="协议" prop="eHost">
              <el-select v-model="form.eHost" placeholder="请选择连接协议" style="width: 100%">
                <el-option label="HTTP" value="http" ></el-option>
                <el-option label="HTTPS" value="https"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地址" prop="eUrl">
              <el-input v-model="form.eUrl" placeholder="请输入ES地址（例如：localhost）"></el-input>
            </el-form-item>
            <el-form-item label="端口" prop="ePort">
              <el-input v-model="form.ePort" placeholder="请输入ES端口（例如：9200）"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="form.eUser" placeholder="请输入ES账号,无则留空"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.ePass" placeholder="请输入ES密码,无则留空"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="padding: 20px;padding-bottom: 0px">
            <el-form-item label="同步过滤">
              <el-checkbox v-model="filterate.n1">INSERT</el-checkbox>
              <el-checkbox v-model="filterate.n2">UPDATE</el-checkbox>
              <el-checkbox v-model="filterate.n3">DELETE</el-checkbox>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple" style="padding: 20px">
            <span style="color: #606266;font-size: 16px;font-weight: bold">字段映射</span>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="padding: 30px;padding-bottom: 0px;padding-top: 0px">
            <el-tabs v-model="mappingType.index">

              <el-tab-pane label="全表映射" name="1">
                <el-form-item label-width="95px">
                  <span slot="label">
                     <span class="span-box">
                       <span>映射规则</span>
                        <el-tooltip style="diaplay:inline" effect="dark"
                          placement="right">
                          <div slot="content">
                            映射规则说明：
                            <br />
                            单表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"字段1,字段2"}]
                            <br />
                            多表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"字段1,字段2"},{...}]
                            <br />
                            参数说明：
                            <br />
                            ● pKey : MySQL库映射表主键，例如 id
                            <br />
                            ● tableName : MySQL库映射表表名称，例如 sys_order
                            <br />
                            ● indexName : ES索引名称，例如 es_order
                            <br />
                            ● field : MySQL映射字段名称，需要和ES保持一致，字段用逗号分隔开，例如：id,name,sex,phone
                            <br />
                            注意：MySQL字段需要和 MySQL表的字段名称、顺序保持一致。
                            <br />
                          </div>
                          <i class="el-icon-question" />
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input type="textarea" v-model="syncData.data1" rows="6" placeholder="请输入映射规则"></el-input>
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="自定义映射" name="2">
                <el-form-item label-width="95px">
                  <span slot="label">
                     <span class="span-box">
                       <span>映射规则</span>
                        <el-tooltip style="diaplay:inline" effect="dark"
                                    placement="right">
                          <div slot="content">
                            映射规则说明：
                            <br />
                            单表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"MySQL字段1,MySQL字段2","mfield":"MySQL字段1,MySQL字段2","efield":"ES字段1,ES字段2"}]
                            <br />
                            多表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"MySQL字段1,MySQL字段2","mfield":"MySQL字段1,MySQL字段2","efield":"ES字段1,ES字段2"},{...}]
                            <br />
                            参数说明：
                            <br />
                            ● pKey : MySQL库映射表主键，例如 id
                            <br />
                            ● tableName : MySQL库映射表表名称，例如 sys_order
                            <br />
                            ● indexName : ES索引名称，例如 es_order
                            <br />
                            ● field : MySQL映射字段名称，需要全部字段，例如：id,name,sex,phone
                            <br />
                            ● mfield : 自定义映射字段，根据 field 选择自定义映射字段，字段用逗号分隔开，例如：id,name,phone
                            <br />
                            ● efield : ES字段名称，字段名称可以和 field 保持不一致，字段用逗号分隔开，例如：userid,username,phone
                            <br />
                            注意：以上字段顺序即是映射顺序，需保持一致; field 需要和全表映射一样，字段需要和 MySQL 保持一致。
                          </div>
                          <i class="el-icon-question" />
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input type="textarea" v-model="syncData.data2" rows="6" placeholder="请输入映射规则"></el-input>
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="混合映射" name="3">
                <el-form-item label-width="95px">
                  <span slot="label">
                     <span class="span-box">
                       <span>映射规则</span>
                        <el-tooltip style="diaplay:inline" effect="dark"
                                    placement="right">
                          <div slot="content">
                            映射规则说明：
                            <br />
                            单表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"MySQL字段1,MySQL字段2","mfield":"MySQL字段1,MySQL字段2","efield":"ES字段1,ES字段2","sql":"SQL语句"}]
                            <br />
                            多表同步：[{"pKey":"主键1","tableName":"数据库表名1","indexName":"ES索引名称1","field":"MySQL字段1,MySQL字段2","mfield":"MySQL字段1,MySQL字段2","efield":"ES字段1,ES字段2","sql":"SQL语句"},{...}]
                            <br />
                            参数说明：
                            <br />
                            ● pKey : MySQL库映射表主键，例如 id
                            <br />
                            ● tableName : MySQL库映射表表名称，例如 sys_order
                            <br />
                            ● indexName : ES索引名称，例如 es_order
                            <br />
                            ● field : MySQL映射字段名称，需要 sys_order 表全字段，例如：id,name,sex,phone
                            <br />
                            ● mfield : 自定义映射字段，根据 SQL语句 选择自定义映射字段，字段用逗号分隔开，例如：id,name,address
                            <br />
                            ● efield : ES字段名称，字段名称可以和 mfield 保持不一致，但顺序需要保持一致，字段用逗号分隔开，例如：userid,username,address
                            <br />
                            ● sql : 自定义查询SQL语句，根据 tableName 主表关联其他表进行查询，查询条件需要根据 field 字段进行查询
                            <br />
                            例如：select id,name,address from sys_order a join sys_user b on a.id = b.id where a.id = #id#
                            <br />
                            sql 中 #id# 必须是 field 里面存在的字段。
                            <br />
                          </div>
                          <i class="el-icon-question" />
                        </el-tooltip>
                     </span>
                   </span>
                  <el-input type="textarea" v-model="syncData.data3" rows="6" placeholder="请输入映射规则"></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>

      <br />
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="padding: 20px; padding-bottom: 0px">
            <el-form-item label="备注说明">
              <el-input type="textarea" v-model="form.remark"  placeholder="请输入备注说明"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <br />
    <br />
    <br />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">新增任务</el-button>
      <el-button @click="cancel">取消新增</el-button>
    </div>

  </div>
</template>

<script>
import { addSyncConfig } from "@/api/system/syncConfig";

export default {
  name: "addSyncConfig",
  dicts: ['sys_notice_status'],
  data() {
    return {
      //同步条件
      filterate: {
        n1: true,
        n2: true,
        n3: true
      },
      //映射类型
      mappingType: {
        index: "1",
      },
      //映射内容
      syncData:{
        data1: null,
        data2: null,
        data3: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        syncType: [
          {required: true, message: "请选择同步类型", trigger: "blur"}
        ],
        mUrl: [
          {required: true, message: "数据库地址不能为空", trigger: "blur"}
        ],
        mPort: [
          {required: true, message: "数据库端口不能为空", trigger: "blur"}
        ],
        mSchema: [
          {required: true, message: "数据库库名不能为空", trigger: "blur"}
        ],
        mUser: [
          {required: true, message: "数据库账号不能为空", trigger: "blur"}
        ],
        mPass: [
          {required: true, message: "数据库密码不能为空", trigger: "blur"}
        ],
        eHost: [
          {required: true, message: "请选择连接协议", trigger: "blur"}
        ],
        eUrl: [
          {required: true, message: "ES地址不能为空", trigger: "blur"}
        ],
        ePort: [
          {required: true, message: "ES端口不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
  },
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
      this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页面
      this.$router.replace({ path: "/system/syncConfig/index" }); // 关闭之后要返回的页面
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        mUrl: null,
        mPort: null,
        mSchema: null,
        mUser: null,
        mPass: null,
        eHost: null,
        eUrl: null,
        ePort: null,
        eUser: null,
        ePass: null,
        syncData: null,
        filterate: [],
        mappingType: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      if(form.syncType == 1){
        this.$modal.msgError("暂不支持全量同步");
        return;
      }
      this.form.filterate = "";
      if(this.filterate.n1 == true){
        this.form.filterate += "insert,"
      }
      if(this.filterate.n2 == true){
        this.form.filterate += "update,"
      }
      if(this.filterate.n3 == true){
        this.form.filterate += "delete,"
      }
      this.form.mappingType = this.mappingType.index;
      if(this.mappingType.index == 1){
        this.form.syncData = this.syncData.data1;
      }else if(this.mappingType.index == 2){
        this.form.syncData = this.syncData.data2;
      }else if(this.mappingType.index == 3){
        this.form.syncData = this.syncData.data3;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          //新增提交
          addSyncConfig(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.cancel();
          });
        }
      })
    }
  }
};
</script>
